<!-- 联系人姓名控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <a-input
      v-model="customerName"
      disabled
      :placeholder="props.props.placeholder"
    />
    <a-button type="text" v-if="personData.length > 1" @click="SwitchContacts"
      >切换联系人</a-button
    >
  </a-space>

  <a-modal
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="auto"
  >
    <template #title> 切换联系人 </template>
    <a-table
      :data="personData"
      :scroll="scroll"
      :pagination="false"
      row-key="id"
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
      @select="onSelect"
      v-bind="args"
    >
      <template #columns>
        <a-table-column align="center" :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="姓名"
          dataIndex="name"
          align="center"
          :width="100"
        >
        </a-table-column>

        <a-table-column
          title="联系电话"
          :width="100"
          dataIndex="phone"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="职务"
          :width="100"
          dataIndex="job"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="部门"
          :width="100"
          dataIndex="department"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="办公地点"
          :width="200"
          dataIndex="address"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="决策作用"
          :width="200"
          dataIndex="decision"
          align="center"
        >
        </a-table-column>
        <a-table-column
          :width="150"
          title="是否为首要联系人"
          dataIndex="primaryContact"
          align="center"
          :sortable="{
            sortDirections: ['descend'],
          }"
        >
          <template #cell="{ record }">
            {{ record.primaryContact === 0 ? '否' : '是' }}
          </template>
        </a-table-column>
        <a-table-column
          :width="150"
          title="是否为决策关键人"
          dataIndex="primaryDecision"
          align="center"
          :sortable="{
            sortDirections: ['descend'],
          }"
        >
          <template #cell="{ record }">
            {{ record.primaryDecision === 0 ? '否' : '是' }}
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, onMounted } from 'vue';
  import { getClientDetailEntry } from '@/api/order-management/client-management/client-list';
  import miiter from '@/utils/mitt';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      oneValue: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );
  const args = {
    bordered: {
      headerCell: true,
    },
    stripe: true,
  };
  const visible = ref(false);
  const emit = defineEmits(['update:oneValue']);
  const personData = ref([]);
  let value = computed({
    get() {
      return props.oneValue;
    },
    set(val) {
      emit('update:oneValue', val);
    },
  });
  const customerName = ref();
  const rowSelection = reactive({
    type: 'radio',
  });

  const selectedKeys = ref([]);

  const SwitchContacts = () => {
    visible.value = true;
  };

  const SelectDate = ref([]);
  const onSelect = (e: number, keys: number, val: any) => {
    SelectDate.value[0] = val;
  };

  const handleOk = () => {
    if (SelectDate.value) {
      customerName.value = SelectDate.value[0].name;
      value.value = SelectDate.value[0].id;
      visible.value = false;
    } else {
      visible.value = false;
    }
  };

  const handleCancel = () => {
    visible.value = false;
  };

  miiter.on('clientRefresh', ({ item, key }) => {
    console.log(11, item, key);
    if (key === 'client') {
      if (!item.person) {
        item.person = [];
        customerName.value = '';
        value.value = undefined;
        return;
      }
      const data = item.person.filter(
        (element) => element.primaryContact === 1
      );
      const selectedPerson = data.length ? data[0] : item.person[0];
      customerName.value = selectedPerson.name;
      value.value = selectedPerson.id;
      personData.value = item.person;
    } else {
      customerName.value = item.contactMan[0]?.name || '';
    }
  });

  const getData = async (id: number) => {
    const res = await getClientDetailEntry({ id });
    customerName.value = res.name;
  };

  onMounted(() => {
    if (props.oneValue) getData(props.oneValue);
  });
</script>

<style scoped lang="less">
  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
    // font-size: 13px;
  }
</style>
